import React, { PureComponent, createRef, forwardRef } from "react";
import Main from "./Main";

export class App extends PureComponent {
  constructor() {
    super();
    // 方式二
    // this.mainRef = createRef()
    // 方式三
    this.mainRef = createRef();
    this.pRef = createRef();
    this.spanRef = createRef();
  }
  getDom() {
    // 方式一 直接将一个字符串绑定到ref上面后通过this.refs获得，目前已经被抛弃，不建议使用
    // console.log(this.refs.main.expose())
    // 方式二 这种是目前最推荐的方法  类似于vue中的ref
    // console.log(this.mainRef.current.expose())
    // 方式三 这一种是在ref中绑定一个函数这个函数有一个参数，这个参数就是这个组件实例 后将这个参数赋值给一个变量从而获得组件组件实例
  }
  render() {
    return (
      <div>
        {/* 方式一 */}
        {/* <Main ref="main"></Main>
        <button onClick={() => this.getDom()}>获得dom</button> */}
        {/* 方式二 */}
        {/* <Main ref={this.mainRef}></Main>
        <button onClick={() => this.getDom()}>获得dom</button> */}
        {/* 方式三 */}
        {/* <Main ref={(e) => {this.mainRef = e}}></Main>
        <button onClick={() => this.getDom()}>获得dom</button> */}
      </div>
    );
  }
}

export default App;
